<template>
	<view class="innerContain">
    <view class="top-content"></view>
    <view class=topradio>

		<view class="top">
			<card :data="data" :cartcount='cartcount' />
		</view>
		<!-- <view class="gap">

		</view> -->
	<view class="childborder" >
      <uni-list  class="list" style="background-color:transparent">
        <uni-list-item
          showArrow="true"
          :title="List[0].item"
          clickable
          @click="clickFirst"
          style="background-color:transparent;padding:0rpx 0rpx 24rpx 0rpx;margin-top:-4rpx "

        >
          <template slot="body">
            <view class="list-icon red">
              <view class="list-icon-title">
                <text style="font-weight: 500;font-size:33rpx">{{ List[0].item }}</text>
              </view>
              <view class="list-icon-icon trueorfalse">
               <image
                  v-show="List[0].status"
                  style="width:45rpx:height:45rpx"
                  src="../../static/true.png"
                /> 
                <image
                  v-show="List[0].warn"
                  src="../../static/false.png"
                />
              </view>
            </view> </template
        ></uni-list-item>
        <uni-list-item
         class="red1"
          showArrow="true"
          :title="List[1].item"
          clickable
          @click="clickSecond"
          ><template slot="body">
            <view class="list-icon">
              <view class="list-icon-title">
                              <text style="font-weight: 500;font-size:33rpx">{{ List[1].item }}</text>
              </view>
              <view class="list-icon-icon trueorfalse">
                  <image
                  v-show="List[1].status"
                  style="width:45rpx:height:45rpx"
                  src="../../static/true.png"
                /> 
                <image
                  v-show="List[1].warn"
                  src="../../static/false.png"
                />
              </view>
            </view> </template
        ></uni-list-item>
        <uni-list-item
          showArrow="true"
         style="padding:20rpx 0rpx 0rpx 0rpx"
          :title="List[2].item"
          clickable
          @click="clickThird"
          ><template slot="body">
            <view class="list-icon">
              <view class="list-icon-title">
                              <text style="font-weight: 500;font-size:33rpx">{{ List[2].item }}</text>

              </view>
              <view class="list-icon-icon trueorfalse">
                <image
                  v-show="List[2].status"
                  style="width:45rpx:height:45rpx"
                  src="../../static/true.png"
                /> 
                <image
                  v-show="List[2].warn"
                  src="../../static/false.png"
                />
              </view>
            </view> </template
        ></uni-list-item>
      </uni-list>
    </view>
     </view>
	</view>
</template>

<script>
	import card from "@/components/innerCard/innerCard.vue";
	import {
  pointCheckDeviceDetail,
  pointCheckTaskDeviceAdd,
  pointCheckTaskDeviceEdit,
  pointCheckTaskDeviceRemove
} from "@/api/index.js";
	export default {
		components: {
			card
		},
		
		data() {
			return {
				dataList: [],
      Tdata: 0,
      List: [
        { item: "脱落", status: false, warn: false, data: false },
        { item: "干涉", status: false, warn: false, data: false },
        { item: "其他", status: false, warn: false, data: false }
      ],
				data: {
					name: '附属件',
					time: "2021-8-19 12:02",
					number: "01",
					position: "北京",
					normal: "2",
					error: "2",
					num: "1",
					isCheck: true,
					people: "王五"
				},
				problemList: [{
						value: '1',
						label: '脱落'
					},
					{
						value: '2',
						label: '干涉'
					},
					{
						value: '3',
						label: '其他'
					}
				],
			}
		},
    		 onLoad(val) {
    this.Tdata = val.taskId;
    	this.cartcount = getApp().globalData.uname
  
  },
		 onShow() {
      this.List.forEach(item => {
      item.warn = false;
      item.status = false;
    });
    pointCheckDeviceDetail(this.Tdata).then(res => {
      this.dataList = res.data["附属件"].pointCheckDeviceDetails;
      this.dataList.forEach(item1 => {
        this.List.forEach(item2 => {
          if (item2.item == item1.item) {

            item2.data = true;
            if (item1.status == "正常") {
              item2.status = true;
            } else if (item1.status == "异常") {
              item2.warn = true;
            }
          } else {
            // item2
          }
        });
      });
    });
  },
		methods: {
// 脱落
			clickFirst() {
				uni.navigateTo({

					url: "../alongChange/alongChange?Tdata=" +this.Tdata
				})
			},
			// 干涉
			clickSecond() {
				uni.navigateTo({
					url: "../alongChange/second?Tdata=" +this.Tdata
				})
			},
			// 其他
			clickThird() {
				uni.navigateTo({
					url: "../alongChange/third?Tdata=" +this.Tdata
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
   overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
</style>